<template>

 <el-row>
  <el-col :span="24">
    <h5>自定义颜色</h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <template v-for="(item) in linksList">
        <el-menu-item :key="item.id" :index="item.id">
          <i class="el-icon-menu"></i>
          <span slot="title">
            <router-link :to="item.path">{{item.text}}</router-link>
            </span>
        </el-menu-item>
      </template>
    </el-menu>
  </el-col>
</el-row>
</template>
<script>
  export default {
    data() {
      return {
        linksList: [
          {
            id: '1',
            path: '/users',
            text: '用户管理',
            icon: ''
          },
          {
            id: '2',
            path: '/blogs',
            text: '博文管理',
            icon: ''
          }
        ]
      }
    },
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  }
</script>